<template>
	<div class="noticeDetail">
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">预约详情</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="swiper">
      <!-- <img src="https://pic.qqtn.com/up/2019-5/15581455226281095.jpg" alt=""> -->
    </div>
    <div class="noticeDetail-exhibition">
      <div class="noticeDetail-tips">
        <span v-if="listData.name">{{listData.name}}</span>
        <span v-if="listData.mobile">{{listData.mobile}}</span>
      </div>
    </div>
      <div class="noticeDetail-describe interval">
        <span>预约类别</span>
        <span v-if="listData.category.name">{{listData.category.name}}</span>
      </div>
      <div class="noticeDetail-describe interval">
        <span>所属社区</span>
        <span v-if="listData.community.name">{{listData.community.name}}</span>
      </div>
      <div class="noticeDetail-describe interval">
        <span>邮箱</span>
        <span v-if="listData.category.email">{{listData.community.email}}</span>
      </div>
      <div class="noticeDetail-describe describe">
        <span>简述</span>
        <span v-if="listData.content" @click="getImageUrl($event)" v-html="listData.content"></span>
      </div>
	</div>
</template>
<script>
import api from '../../api/api.js'
import wx from 'weixin-js-sdk';
export default {
  data(){
    return{
      listData:[],
      imgUrls:[],
      newImglist: [],
      Id: '',
      dome: ''
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  created(){
    this.getDetail()
  },
  beforeDestroy() {
    window.removeEventListener("scroll",this.handleScroll)
  },
  methods:{
    goback(){
      // if(this.dome&&this.dome==-1){
      //   this.$router.go(-1)
      // }else{
      //   this.$router.push('/')
      // }
    },    
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if(scrollTop >= 200){
        this.$refs.showBG.style.background = '#57c5c6'
      }else{
        this.$refs.showBG.style.background = 'none'
      }
    },
    getDetail(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.showAppointment,{})
      .then((response) => {
        if(response.data.code==1){
          console.log('response.data.data',response.data.data)
          this.listData = response.data.data
        }else{
          this.$toast.clear();
          this.$toast(response.data.msg);
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });  
    },

  },
  components: {}
}
</script>
<style scoped>
.swiper{
  /* padding-top: .7rem; */
  width: 100%;
  height: 5rem;
  background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594267483786&di=232665e4c3b5447fb1f7236d13ffc849&imgtype=0&src=http%3A%2F%2Fdingyue.nosdn.127.net%2F2FB2OH2lUQCgD7WPaYQnmb47qO6hVB672wEthgvSZFTWq1545293646375compressflag.jpg');
  background-size: 100% 100%; 
}
.noticeDetail{
  overflow: hidden;
}
.noticeDetail img{
  width: 100%;
  height: 100%;
}
.noticeDetail-tips{
  font-size: .35rem;
  font-weight: bold;
  color: #000;
}
.noticeDetail-tips span{
  display: block;
  height: auto;
}
.noticeDetail-tips span:nth-of-type(1){
  margin-top: .35rem
}
.parcel-Importance{
  margin: .3rem 0 .1rem 0;
  display: flex;
}
.noticeDetail-exhibition{
  margin: 0 .5rem;
}
.noticeDetail-describe{
  margin: 0 .5rem;
  font-size: .32rem;
  font-weight: bold;
  color: #000;
}
.describe{
  padding-bottom: .5rem;
}
.interval{
  margin: .2rem .5rem;
  font-size: .32rem;
}
.noticeDetail-describe span{
  display: block;
  margin: .2rem 0;
}
.noticeDetail-describe span:nth-of-type(2){
  font-size: .28rem;
  color: #57c5c6;
}
.iconback{
  color: #fff;
}
</style>
